<template>
  <div>
    <!-- 添加分页器 -->
    <el-pagination layout="prev, pager, next" :total="50" :page-size="pageSize" @current-change="currentChange">
    </el-pagination>
    <pdf :src="src" :page="page"></pdf>
  </div>
</template>

<script>

import pdf from 'vue-pdf'

//加载pdf路径
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');

export default {
  components: {
    pdf
  },
  data() {
    return {
      src: loadingTask,  //pdf路径
      numPages: undefined, //总页面
      page: 1, //默认展示页面为1
      pageSize: 1,//总页面
    }
  },
  mounted() { //生命周期

    this.src.promise.then(pdf => { //从pdf中读取

      this.numPages = pdf.numPages;  //读取我们导入的pdf总页面
      this.pageSize = this.numPages  //设置分页总页码
    });
  },
  methods:{
    currentChange(currentpage){
      this.page=currentpage
    }
  }
}

</script>